<template>
  <view class="index">
    <view class="center">
      <view class="tabs">
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 'oil' }"
          @click="switchTab('oil')"
        >
          油耗计算
        </view>
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 'electric' }"
          @click="switchTab('electric')"
        >
          电耗计算
        </view>
      </view>

      <view class="result" v-if="activeTab === 'oil'">
        <view class="result-item left">
          <text class="label">百公里油耗</text>
          <text class="value">{{ result.oilConsumptionPerHundredKm }}</text>
          <text class="unit">升/百公里</text>
        </view>
        <view class="result-item right">
          <text class="label">每公里耗费</text>
          <text class="value">{{ result.costPerKm }}</text>
          <text class="unit">元/公里</text>
        </view>
      </view>

      <view class="result" v-if="activeTab === 'electric'">
        <view class="result-item left">
          <text class="label">百公里电耗</text>
          <text class="value">{{ result.electricConsumptionPerHundredKm }}</text>
          <text class="unit">度/百公里</text>
        </view>
        <view class="result-item right">
          <text class="label">每公里耗费</text>
          <text class="value">{{ result.costPerKm }}</text>
          <text class="unit">元/公里</text>
        </view>
      </view>

      <view class="ind_from">
        <template v-if="activeTab === 'oil'">
          <view class="row">
            <view class="label">油价(元/升)</view>
            <view class="value">
              <input
                class="input"
                v-model="formData.oilPrice"
                type="digit"
                placeholder="请输入油价"
              />
            </view>
          </view>
          <view class="row">
            <view class="label">加油金额(元)</view>
            <view class="value">
              <input
                class="input"
                v-model="formData.addPrice"
                type="digit"
                placeholder="请输入加油金额"
              />
            </view>
          </view>
        </template>

        <template v-if="activeTab === 'electric'">
          <view class="row">
            <view class="label">电价(元/度)</view>
            <view class="value">
              <input
                class="input"
                v-model="formData.electricPrice"
                type="digit"
                placeholder="请输入电价"
              />
            </view>
          </view>
          <view class="row">
            <view class="label">充电金额(元)</view>
            <view class="value">
              <input
                class="input"
                v-model="formData.addPrice"
                type="digit"
                placeholder="请输入充电金额"
              />
            </view>
          </view>
        </template>

        <view class="row">
          <view class="label">行驶里程(公里)</view>
          <view class="value">
            <input
              class="input"
              v-model="formData.drivingDistance"
              type="digit"
              placeholder="请输入行驶里程"
            />
          </view>
        </view>
      </view>

      <view class="btn" @click="submit">计算</view>
      <view class="bottom_btn_group">
        <button class="addShortcut" open-type="addShortcut" :bindaddshortcut="eventHandler">添加到桌面</button>
        <button class="share" open-type="share">分享</button>
      </view>
      <view class="pub_ad_banner">
        <!-- #ifdef MP-TOUTIAO -->
        <ad
          :unit-id="adBannerIdDouyin"
          :ad-intervals="30"
          :fixed="false"
          type="banner"
          scale="100"
        />
        <!-- #endif -->
        <!-- #ifdef MP-KUAISHOU -->
        <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
        <!-- #endif -->
      </view>
      <view class="sub_text">
        <view v-if="activeTab === 'oil'" class="tips">
          <view class="tip-item"><view class="tip-index">1</view><view class="tip-text">行驶的公里数，可由连续两次都加满油时里程表上数值的差获得。</view></view>
          <view class="tip-item"><view class="tip-index">2</view><view class="tip-text">点击记录，可将本次的油耗数据记录下来，到历史油耗中查看爱车的油耗数据。</view></view>
          <view class="tip-item"><view class="tip-index">3</view><view class="tip-text tip-title">以下为计算公式：</view></view>
          <view class="formula-block">百公里油耗（L） = 加油量（L） ÷ 公里数（km） × 100</view>
          <view class="formula-or">或</view>
          <view class="formula-block">百公里油耗（L） = 加油总价（元） ÷ 油的单价（元/L） ÷ 公里数（km） × 100</view>
        </view>
        <view v-if="activeTab === 'electric'" class="tips">
          <view class="tip-item"><view class="tip-index">1</view><view class="tip-text">行驶的公里数，可由连续两次都充满电时里程表上数值的差获得。</view></view>
          <view class="tip-item"><view class="tip-index">2</view><view class="tip-text">点击记录，可将本次的电耗数据记录下来，到历史电耗中查看爱车的电耗数据。</view></view>
          <view class="tip-item"><view class="tip-index">3</view><view class="tip-text tip-title">计算公式：</view></view>
          <view class="formula-block">百公里电耗（度） = 充电费用（元） ÷ 电价（元/度） ÷ 行驶公里数（公里） × 100</view>
          <view class="formula-block">每公里花费（元） = 充电费用（元） ÷ 行驶公里数（公里）</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  showAdConfirmModal,
  adVideoShow,
  adBannerIdDouyin,
  adBannerIdKuaishou,
} from "@/common/ad";
export default {
  data() {
    return {
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      showResult: false,
      isUnlock: false,
      activeTab: 'oil',
      formData: {
        oilPrice: "",
        electricPrice: "",
        addPrice: "",
        drivingDistance: "",
      },
      result: {
        costPerKm: 0,
        oilConsumptionPerHundredKm: 0,
        electricConsumptionPerHundredKm: 0,
      },
    };
  },
  methods: {
    eventHandler(e) {
      if (e.detail.errNo) {
        this.global.toast("添加到桌面失败");
      } else {
        this.global.toast("添加到桌面成功");
      }
    },
    switchTab(tab) {
      this.activeTab = tab;
      this.resetForm();
    },
    resetForm() {
      this.formData = {
        oilPrice: "",
        electricPrice: "",
        addPrice: "",
        drivingDistance: "",
      };
      this.result = {
        costPerKm: 0,
        oilConsumptionPerHundredKm: 0,
        electricConsumptionPerHundredKm: 0,
      };
    },
    calculateFuelConsumption(oilPrice, addPrice, drivingDistance) {
      const costPerKm = addPrice / drivingDistance;
      const oilConsumptionPerHundredKm = (addPrice / oilPrice / drivingDistance) * 100;
      this.result.costPerKm = costPerKm.toFixed(2);
      this.result.oilConsumptionPerHundredKm = oilConsumptionPerHundredKm.toFixed(2);
    },
    calculateElectricConsumption(electricPrice, addPrice, drivingDistance) {
      const costPerKm = addPrice / drivingDistance;
      const electricConsumptionPerHundredKm = (addPrice / electricPrice / drivingDistance) * 100;
      this.result.costPerKm = costPerKm.toFixed(2);
      this.result.electricConsumptionPerHundredKm = electricConsumptionPerHundredKm.toFixed(2);
    },
    getResult() {
      if (this.activeTab === 'oil') {
        this.calculateFuelConsumption(
          this.formData.oilPrice,
          this.formData.addPrice,
          this.formData.drivingDistance
        );
      } else {
        this.calculateElectricConsumption(
          this.formData.electricPrice,
          this.formData.addPrice,
          this.formData.drivingDistance
        );
      }
      this.isUnlock = true;
    },
    submit() {
      if (this.activeTab === 'oil') {
        if (this.formData.oilPrice == "") {
          this.global.toast("请输入油价");
          return;
        }
      } else {
        if (this.formData.electricPrice == "") {
          this.global.toast("请输入电价");
          return;
        }
      }
      
      if (this.formData.addPrice == "") {
        this.global.toast("请输入" + (this.activeTab === 'oil' ? "加油" : "充电") + "金额");
        return;
      }
      if (this.formData.drivingDistance == "") {
        this.global.toast("请输入行驶里程");
        return;
      }

      if (!this.isUnlock) {
        showAdConfirmModal(() => {
          try {
            adVideoShow(() => {
              this.getResult();
            });
          } catch (error) {
            this.getResult();
          }
        });
      } else {
        this.getResult();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.index {
  padding: 20rpx;
  background: #f0f5ff;
  min-height: 100vh;
}

.center {
  max-width: 750rpx;
  margin: 0 auto;
}

.tabs {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 4rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 82, 204, 0.05);
  border: 2rpx solid rgba(0, 82, 204, 0.1);

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    font-size: 28rpx;
    color: #666;
    position: relative;
    transition: all 0.3s ease;

    &.active {
      color: #0052cc;
      font-weight: bold;
      background: #f0f5ff;
      border-radius: 12rpx;
    }
  }
}

.result {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
  
  .result-item {
    flex: 1;
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 82, 204, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2rpx solid rgba(0, 82, 204, 0.1);
    
    .label {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 12rpx;
    }
    
    .value {
      font-size: 48rpx;
      font-weight: bold;
      color: #0052cc;
      margin: 8rpx 0;
    }
    
    .unit {
      font-size: 24rpx;
      color: #4a90e2;
    }
  }
}

.ind_from {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 82, 204, 0.05);
  border: 2rpx solid rgba(0, 82, 204, 0.1);
  
  .row {
    padding: 24rpx 20rpx;
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid rgba(0, 82, 204, 0.1);
    
    &:last-child {
      border-bottom: none;
    }
    
    .label {
      width: 200rpx;
      font-size: 28rpx;
      color: #0052cc;
      font-weight: 500;
    }
    
    .value {
      
      .input {
        width: 100%;
        height: 72rpx;
        background: #f8faff;
        border-radius: 8rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
        border: 2rpx solid rgba(0, 82, 204, 0.1);
        
        &:focus {
          border-color: #0052cc;
          background: #fff;
        }
      }
    }
  }
}

.btn {
  margin: 24rpx 0;
  background: linear-gradient(135deg, #0052cc, #4a90e2);
  color: #fff;
  text-align: center;
  padding: 24rpx 0;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: bold;
  box-shadow: 0 4rpx 12rpx rgba(0, 82, 204, 0.2);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 6rpx rgba(0, 82, 204, 0.2);
    background: linear-gradient(135deg, #0047b3, #3d7bc8);
  }
}

.sub_text {
  text-align: center;
}

.pub_ad_banner {
  margin-top: 40rpx;
}

// .share {
  // margin: 16rpx auto;
  // height: 80rpx;
  // line-height: 80rpx;
  // text-align: center;
  // background: #fff;
  // color: #0052cc;
  // border: 2rpx solid #0052cc;
  // font-size: 32rpx;
  // border-radius: 12rpx;
  // border: none;
  // box-shadow: 0 4rpx 12rpx rgba(0, 82, 204, 0.2);
  // transition: all 0.3s ease;
// }

.tips {
  background: #f0f5ff;
  border-radius: 10rpx;
  margin: 0 auto;
  line-height: 2.1;
  box-shadow: 0 2rpx 8rpx rgba(0,82,204,0.05);
  color: #333;
  font-size: 26rpx;
  
  .tip-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8rpx;
    
    .tip-index {
      display: inline-block;
      min-width: 32rpx;
      height: 32rpx;
      background: #0052cc;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      font-size: 22rpx;
      font-weight: bold;
      margin-right: 14rpx;
      line-height: 32rpx;
      margin-top: 12rpx;
    }
    .tip-text {
      flex: 1;
      font-weight: 500;
      text-align: left;
    }
  }
  .tip-title {
    font-weight: bold;
    margin-bottom: 8rpx;
    color: #0052cc;
    font-size: 27rpx;
  }
  .formula-block {
    background: #e6f0ff;
    border-left: 6rpx solid #0052cc;
    border-radius: 6rpx;
    padding: 16rpx 18rpx;
    margin: 10rpx 0 0 0;
    font-family: 'Consolas', 'Menlo', 'Monaco', monospace;
    color: #0052cc;
    font-size: 26rpx;
    word-break: break-all;
  }
  .formula-or {
    color: #888;
    margin: 0 0 0 16rpx;
    font-size: 24rpx;
  }
}
</style>